<template>
  <a-typography-paragraph :ellipsis="{ rows: rows, showTooltip: { type: 'popover', props: { position: position, style: { maxWidth: maxWidth + 'px' } } } }">
    <span v-if="val">{{ val }}</span>
    <slot></slot>
  </a-typography-paragraph>
</template>

<script lang="ts" setup>
  import { defineComponent } from 'vue'
  const props = defineProps({
    rows: {
      type: Number,
      default: 2,
    },
    maxWidth: {
      type: [Number, String],
      default: 400,
    },
    position: {
      type: String,
      default: 'bottom',
    },
    val: {
      type: String,
    },
  })
</script>
<script lang="ts">
  export default defineComponent({
    name: 'TextLimit',
  })
</script>

<style lang="less" scoped>
  .arco-typography {
    margin-bottom: 0;
    word-wrap: break-word;
  }
</style>
